<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="查询信息">
        <el-input v-model="data.info" placeholder="请输入表名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querySysTable">查询</el-button>
      </el-form-item>
    </el-form>
    <yu-table ref="yuTable" :tableData="data.tableData" :columns="data.tableData.columns" @getSelectionRows="getSelectionRows">
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="addDict">新增</el-button>
          <el-button @click="delBatch">删除</el-button>
        </el-button-group>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group class="ml-4">
          <el-button text type="success" size="small" @click="editRow(scopeData.row, scopeData.row.rowIndex - 1)">编辑 </el-button>
          <el-button text size="small" type="danger" @click="showDetail(scopeData.row, scopeData.row.rowIndex - 1)">查看 </el-button>
        </el-button-group>
      </template>
    </yu-table>
    <yu-dialog :data="data.tableDataEdit.dialogConfig" v-model:isShow="data.tableDataEdit.isShow">
      <TableDataEdit :editData="data.editData" v-model:isShow="data.tableDataEdit.isShow"></TableDataEdit>
    </yu-dialog>
    <yu-dialog :data="data.TableDataShow.dialogConfig" v-model:isShow="data.TableDataShow.isShow">
      <TableDataShow :data="data.TableDataShow.data" v-model:isShow="data.tableDataEdit.isShow"></TableDataShow>
    </yu-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
  import TableDataEdit from './TableDataEdit.vue';
  import TableDataShow from './TableDataShow.vue';
  import YuTable from '@/components/com/YuTable.vue';
  let { proxy } = getCurrentInstance();
  const yuTable = ref(null);
  const data = reactive({
    info: '', //搜索信息
    tableData: { data: [], columns: [], tableArrts: { haspage: true } },
    tableDataEdit: { isShow: false, dialogConfig: { title: '' } },
    TableDataShow: { data: {}, isShow: false, dialogConfig: { title: '' } },
    editData: {},
  });
  const showDetail = (row, index) => {
    data.TableDataShow.isShow = true;
    data.TableDataShow.dialogConfig.title = '数据查看';
    data.TableDataShow.data = row;
  };
  const editRow = (row, index) => {
    data.tableDataEdit.dialogConfig.title = '修改';
    data.editData = row;
    data.tableDataEdit.isShow = true;
  };
  const delBatch = () => {
    let selectRows = yuTable.value.selectRows;
    if (selectRows.length > 0) {
      proxy
        .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          proxy.$api.data.delSysTable(selectRows).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
              yuTable.value.deleteRows();
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    } else {
      proxy.$message({
        type: 'error',
        message: '请选择删除数据',
      });
    }
  };
  const querySysTable = () => {
    proxy.$api.data.querySysTable({ info: data.info }).then(res => {
      data.tableData.data = res;
    });
  };
  const addDict = () => {
    data.tableDataEdit.dialogConfig.title = '新增';
    data.tableDataEdit.isShow = true;
    data.editData = {};
  };
  data.tableData.columns = [
    { type: 'index' },
    { type: 'selection' },
    { title: '来源表', key: 'tableName', align: 'left', edit: false },
    { title: '表名称', key: 'showName', align: 'left', edit: false },
    { title: '备注', key: 'remark', align: 'left', edit: false },
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
</script>

<style lang="scss" scoped></style>
